<template lang="pug">
.prev-area.mb-3
  .cover-bg
    .num-width-1 {{coverNumber.num1}}
    .num-width-2 {{coverNumber.num2}}
    .num-width-3 {{coverNumber.num3}}
.px-4
  template(v-for="com in pageData" :key="com.name")
    template(v-if="com.type==`sizeGroup`")
      Inputs(:comInfo="com" @change="formChange(com.name,$event)")
    template(v-if="com.type==`select`")
      .flex.items-center
        .title.pt-1 {{com.label}}
      .flex-1.mb-3
        template(v-for="(child,i) in com.sub" :key="child.name")
          template(v-if="child.level==1")
            SingleSelect(:comInfo="child" @change="formArrayChange(com.name,i,$event)")
          template(v-if="child.level==2")
            DoubleSelect(:comInfo="child" @change="formArrayChange(com.name,i,$event)")
 

    template(v-if="com.type==`package`")
      .flex.items-center
        .title.pt-1 {{com.label}}
      .flex-1.mb-3
        template(v-for="(child,i) in com.sub" :key="child.name")
          PackageSelect(:comInfo="child" @change="formArrayChange(com.name,i,$event)")
    template(v-if="com.type==`process`")
      .flex.items-center
        .title.pt-1 {{com.label}}
      ProcessSelect(:comInfo="com" :form="form" @change="formChange(com.name,$event)")
    template(v-if="com.type==`input`")
      .flex.items-center.gap-4.mb-4
        .title.pt-1.pr-2 {{com.label}}
        template(v-if="com.valueType==`string`")
          uni-easyinput(:value="com.value" primaryColor="#B59E6D" :clearable="false"  :placeholder="com.placeholder" @input="formChange(com.name,$event)" )
        template(v-if="com.valueType==`number`")
          uni-number-box(width="200" @input="formChange(com.name,$event)" :max="Number(com.max)" :min="Number(com.min)" :value="Number(com.value)")
 
 
.flex.justify-center.w-full.mt-8.px-6.gap-6 
  button.submit-btn.flex-1(@click="submit()") 立即报价   
.h-32
</template>
<script setup>
import Inputs from '@/components/forms/Inputs.vue';
import ProcessSelect from '@/components/forms/ProcessSelect.vue';
import SingleSelect from '@/components/forms/SingleSelect.vue';
import DoubleSelect from '@/components/forms/DoubleSelect.vue';
import PackageSelect from '@/components/forms/PackageSelect.vue';

import { getPageCfg ,Quote } from '@/api/common'
import { useCartStore } from "@/stores/cart";

const showToast = str=>uni.showToast({
  title:str,
  icon:'none'
})
const pageId = ref("")
const pageName = ref("")
const pageData =  reactive([])
const pageOption = reactive({})
const form = reactive({})
const coverNumber = computed(()=>{
  const {size} = form;
  if(!size)return {}
  return {
    ...size,
    num1:size.length,
    num2:size.length-2*size.outside,
    num3:size.cover
  }
})
watch(pageName,()=>{
    uni.setNavigationBarTitle({
      title:pageName.value
    });
})
onLoad(async op=>{
  let name = decodeURIComponent(op.name);
  const _op = {
    ...op,
    name,
  }
  Object.assign(pageOption,_op)
  console.log(_op);
  
  pageName.value = name;  
  pageId.value = op.id;
  await getPageConfig(op.id)
  uni.setNavigationBarTitle({
    title:name
  });

  // if(_op._t){
  //   const {list} = useCartStore();
  //   let target = list.find(e=>e._t == _op._t);
  //   console.log('targettargettarget',target);
    
  //   if(target){
  //     Object.assign(form,target)
  //   }
  // }
})

async function getPageConfig(id) {
  const res = await getPageCfg({id});
  const data = res.data
  
  pageName.value = data.name;
  Object.assign(pageData,data.page_cfg)

  for(let com of pageData){
    switch (com.type){
      // case 'select': {
      //   com.sub.forEach((el,i)=>{
      //     formArrayChange(com.name,i,el.value)
      //   })
      //   break;
      // }
      // case 'process': {
      //   com.sub.forEach((el,i)=>{
      //     formChange(com.name,com.value)
      //   })
      //   break;
      // }
      // case 'package': {
      //   com.sub.forEach((el,i)=>{
      //     formArrayChange(com.name,i,el.value)
      //   })
      //   break;
      // }
      case 'input': {
        formChange(com.name,com.value)

        break;
      }
    }
  }
}
function formChange(name,val){
  console.log(name,val);
  form[name] = val;
}

function formArrayChange(name,idx,ev){
  if(Array.isArray(form[name])){
    form[name][idx] = ev;
  }else{
    let arr = [];
    arr[idx] = ev;
    form[name] =arr;
  }
  
}

async function submit(){
  uni.showLoading();
    console.log(form);
  for(let item of pageData){
    if( ['select'].includes(item.name) &&  !form[item.name]){
      showToast(`请完善${item.label}`);
      return;
    }
  }
  const { addCart } = useCartStore();
  
  const res = await Quote([{
    type:pageName.value,
    productId:pageId.value,
    productCode:pageOption.productCode,
    productTypeCode:pageOption.productTypeCode,
    ...form
  }]);
  if(res.code==200){
    addCart({
      type:pageName.value,
      productId:pageId.value,
      productCode:pageOption.productCode,
      productTypeCode:pageOption.productTypeCode,
      ...form,
      _t:Date.now()
    })
    
    toBaojiaDetail();
  }else{
    showToast("报价错误")
  }
  uni.hideLoading();
}

function toBaojiaDetail(){
  uni.switchTab({
    url:'/pages/baojia/baojiaCart',
  })
}

</script>
<style scoped lang="scss">
 .title{
  @apply text-base text-prim flex items-center whitespace-nowrap;
  &:before{
    @apply inline-block h-[1em] w-[0.4em] rounded-md bg-prim mr-2;
    content: '';
  }
}
.prev-area {
  @apply  h-[60vw] flex justify-center items-center w-full;
}
.cover-bg {
  @apply  h-[60vw] w-[90vw] bg-no-repeat transition-all relative bg-contain bg-center;
  // background-size: 100% 100%;
  background-image: url('@/static/zhengtao.png');
    .num-width-1,
  .num-width-2,
  .num-width-3{
    @apply absolute font-mono text-lg;
  }
  .num-width-1{
    bottom: 1px;
    right: 47%;
  }
  .num-width-2{
    bottom: 27%;
    right: 43%;
  }
  .num-width-3{
    right: 13%;
    top: 28%;
  }
}
</style>